import {
    Table,
    Button,
    Modal,
    Menu,
    Input,
    Icon,
    message
} from 'antd';
import axios from 'axios';
import React, {Component} from 'react';
class MyTable extends Component {
    constructor(props) {
        super(props);
        this.delete = this
            .delete
            .bind(this);
        this.showModal = this
            .showModal
            .bind(this);
        this.handleOk = this
            .handleOk
            .bind(this);
        this.handleCancel = this
            .handleCancel
            .bind(this);
        this.handleOk1 = this
            .handleOk1
            .bind(this);
        this.handleCancel1 = this
            .handleCancel1
            .bind(this);
        this.getField = this
            .getField
            .bind(this);
        this.changeDetails = this
            .changeDetails
            .bind(this);
        // 设置 initial state
        this.state = {
            selects: [],
            columns: [],
            data: [],
            visible: false,
            visible1: false
        };
    }
    changeDetails(record) {
        this.setState({visible1: true});
        this
            .state
            .columns
            .map(c => {
                if (c.title != "操作") {
                    $('#' + c.dataIndex + 'change').val(record[c.dataIndex]);
                }
            });
            $('#changeId').val(record.id);
    }
    showModal() {
        this.setState({visible: true});
    }
    handleOk(e) {
        var max = 0;
        this
            .state
            .data
            .map(d => {
                if (d.id > max) {
                    max = d.id;
                }
            })
        var _this = this;
        var formData = {};
        this
            .state
            .columns
            .map(c => {
                if (c.title != "操作") {
                    formData[c.dataIndex] = $('#' + c.dataIndex).val();
                }

            });
        formData["id"] = max += 1;
        axios
            .get('/Json/AddObject?objectName=' + _this.props.name, {params: formData})
            .then(function (response) {
                _this.setState({data: response.data});
            })
            .catch(function (error) {
                console.log(error);
            });
        this.setState({visible: false});
        message.success("新增成功");
    }
    handleCancel(e) {
        console.log(e);
        this.setState({visible: false});
    }
    handleOk1(e) {
        var _this = this;
        var formData = {};
        this
            .state
            .columns
            .map(c => {
                if (c.title != "操作") {
                    formData[c.dataIndex] = $('#' + c.dataIndex+"change").val();
                }

            });
        formData["id"] = $('#changeId').val();
        axios
            .get('/Json/UpdateObject?objectName=' + _this.props.name, {params: formData})
            .then(function (response) {
                _this.setState({data: response.data});
            })
            .catch(function (error) {
                console.log(error);
            });
        this.setState({visible1: false});
        message.success("修改成功");
    }
    handleCancel1(e) {
        console.log(e);
        this.setState({visible1: false});
    }
    componentWillReceiveProps() {
        var _this = this;
        if (_this.props.name != "") {
            axios
                .get('/Json/GetObjectColumns?objectName=' + _this.props.name)
                .then(function (response) {
                    response
                        .data
                        .push({

                            title: '操作',
                            render: record => <Button
                                    type="dashed"
                                    onClick={_this
                                    .changeDetails
                                    .bind(this, record)}>修改</Button>
                        })
                    _this.setState({columns: response.data});
                })
                .catch(function (error) {
                    console.log(error);
                });
            axios
                .post('/Json/GetObjectData?objectName=' + _this.props.name)
                .then(function (response) {
                    _this.setState({data: response.data});

                })
                .catch(function (error) {
                    console.log(error);
                });
        }

    }
    getField() {
        return (this.state.columns.map(c => {
            if (c.title != "操作") {
                return (<Input type="text" key={c.title} id={c.dataIndex} placeholder={c.dataIndex}/>)
            }

        }))
    }
    getChangeField() {
        return (this.state.columns.map(c => {
            if (c.title != "操作") {
                return (<Input
                    type="text"
                    key={c.title}
                    id={c.dataIndex + "change"}
                    placeholder={c.dataIndex}/>)
            }else{
                return (<input key="564645646" type="hidden" id="changeId"/>)
            }

        }))
    }
    delete() {
        var _this = this;
        if (this.state.selects != "") {
            this
                .state
                .selects
                .map(record => {
                    axios
                        .delete('/Json/DeleteObjectData?objectName=' + _this.props.name + "&id=" + record.id)
                        .then(function (response) {
                            _this.setState({data: response.data});

                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                });
            this.state.selects = [];
            message.success("删除成功")
        }

    }
    render() {
        // rowSelection object indicates the need for row selection
        const rowSelection = {
            onChange: (selectedRowKeys, selectedRows) => {
                console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
            },
            onSelect: (record, selected, selectedRows) => {
                var flag = false;
                this
                    .state
                    .selects
                    .map(s => {
                        if (s.id == record.id) 
                            flag = true;
                        }
                    );
                if (!flag) {
                    this
                        .state
                        .selects
                        .push(record);
                } else {
                    var index = this
                        .state
                        .selects
                        .indexOf(record);
                    this
                        .state
                        .selects
                        .splice(index, 1)
                }
            },
            onSelectAll: (selected, selectedRows, changeRows) => {
                this.state.selects = this.state.data;
            },
            getCheckboxProps: record => ({
                disabled: record.name === 'Disabled User', // Column configuration not to be checked
            })
        };
        return (
            <div id="test">
                <Button
                    type="dashed"
                    style={{
                    margin: 5
                }}
                    onClick={this.showModal}>增加</Button>
                <Button type="danger" onClick={this.delete}>删除</Button>
                <Table
                    rowKey="id"
                    rowSelection={rowSelection}
                    columns={this.state.columns}
                    dataSource={this.state.data}/>
                <Modal
                    title="新增"
                    visible={this.state.visible}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}>
                    <form id="add">
                        {this.getField()}
                    </form>
                </Modal>
                <Modal
                    title="修改"
                    visible={this.state.visible1}
                    onOk={this.handleOk1}
                    onCancel={this.handleCancel1}>
                    <form id="change">
                        {this.getChangeField()}
                    </form>
                </Modal>
            </div>
        )
    }
}
export default MyTable;